<!DOCTYPE html>
<html>

<head>
    <title>电气数据监控 (Plotly.js)</title>
    <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
    <style>
        #plotlyChart {
            width: 100%;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="plotlyChart"></div>

    <script>
        // 生成模拟电气数据
        function generateData(pointCount) {
            const data = {
                time: [],
                voltage: [],
                current: []
            };

            let voltage = 220;
            let current = 10;

            const now = Date.now();

            for (let i = 0; i < pointCount; i++) {
                const timestamp = new Date(now - (pointCount - i) * 1000);
                voltage = 220 + Math.sin(i / 100) * 22;
                current = 10 + Math.sin(i / 50) * 3;

                data.time.push(timestamp);
                data.voltage.push(Number(voltage.toFixed(2)));
                data.current.push(Number(current.toFixed(2)));
            }

            return data;
        }

        // 生成10万条数据
        const electricalData = generateData(100000);

        // 准备图表数据
        const voltageTrace = {
            x: electricalData.time,
            y: electricalData.voltage,
            name: '电压',
            mode: 'lines',
            line: { color: 'red', width: 1 }
        };

        const currentTrace = {
            x: electricalData.time,
            y: electricalData.current,
            name: '电流',
            yaxis: 'y2',
            mode: 'lines',
            line: { color: 'blue', width: 1 }
        };

        // 图表布局配置
        const layout = {
            title: '电气数据监控 (Plotly.js)',
            xaxis: {
                title: '时间',
                type: 'date',
                rangeslider: { visible: true }
            },
            yaxis: {
                title: '电压 (V)',
                range: [180, 260]
            },
            yaxis2: {
                title: '电流 (A)',
                overlaying: 'y',
                side: 'right',
                range: [5, 15]
            },
            legend: { x: 1.1, y: 1 },
            hovermode: 'x unified',
            showlegend: true
        };

        // 配置选项
        const config = {
            responsive: true,
            scrollZoom: true,
            displayModeBar: true
        };

        // 绘制图表
        Plotly.newPlot('plotlyChart', [voltageTrace, currentTrace], layout, config);

        // 窗口大小变化响应
        window.addEventListener('resize', function () {
            Plotly.Plots.resize('plotlyChart');
        });
    </script>
</body>

</html>